/**
 * Created by hxr on 2017/12/18.
 */

import React, { Component } from 'react';
import {Drawer,Button,NavBar} from 'iftide';
import {View,Text,StyleSheet,ScrollView} from 'react-native'

export default class Drawer_Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            open: true
        }
    }
   // drawer: any;

    onOpenChange = (isOpen) => {
        /* tslint:disable: no-console */
        console.log('是否打开了 Drawer', (isOpen).toString());
    }

    render() {
        const itemArr = Array.apply(null, Array(10)).map(function (_, i) { return i; }).map((_i, index) => {

            return (
                <View key={index} style={{ flexDirection: 'row',
                    justifyContent: 'center', alignItems: 'center',height:30 }}>
                    <Text>Categories - {index}</Text>
                </View>
            );

        });

        const sidebar = (
            <ScrollView style={styles.container}>
                <Button title="测试一下"></Button>
                <View>{itemArr}</View>
            </ScrollView>
        );

        let header= {
            leftButton: '返回',
            title: '抽屉',
            rightButton:'下一步',
            rightButtonFunc:this.rightButtonFunc,
            rightButtonType:'more',
            type:'header'
        }

        return (
            <View style={{height:'100%'}}>
                <Drawer
                    sidebar={sidebar}
                    position="top"
                    open={true}
                    drawerRef={(el) => this.drawer = el}
                    onOpenChange={this.onOpenChange}
                    drawerBackgroundColor="#eee"
                >
                    <NavBar {...header} leftButtonFunc={()=> this.drawer && this.drawer.openDrawer()}/>
                </Drawer>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
});